<script setup lang="ts">
import { AbilityModel } from '@/api/webSite/response';

const { abilities } = defineProps<{
  abilities: Array<AbilityModel>
}>();

function skillPerStyle(skill: AbilityModel) {
  return `width:${skill.percent}%;`
}

</script>

<template>
  <div class="container">

    <div class="skill-box" v-for="item in abilities" :key="item.id">
      <span class="title">{{ item.name }}</span>
      <div class="skill-bar">
        <span class="skill-per" :style="skillPerStyle(item)">
          <span class="tooltip">{{ item.percent }}%</span>
        </span>
      </div>
    </div>

  </div>
</template>

<style lang="scss">
.container {
  position: relative;
  width: 100%;
  background: #202016;
  margin: 0 15px;
  padding: 10px 20px;
  border-radius: 10px;
  user-select: none;

  .skill-box {
    width: 100%;
    margin: 25px 0;

    .title {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #9ea9b0ba;
      letter-spacing: 1px;
    }

    .skill-bar {
      height: 8px;
      width: 100%;
      border-radius: 6px;
      margin-top: 6px;
      background: rgba(0, 0, 0, 0.1);

      .skill-per {
        position: relative;
        display: block;
        height: 100%;
        border-radius: 6px;
        background: #000;
        animation: progress 0.4s ease-in-out forwards;
        opacity: 1; // 这里把 opacity 改成 1 确保可见

        @keyframes progress {
          0% {
            width: 0;
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        .tooltip {
          position: absolute;
          right: -14px;
          top: -28px;
          font-size: 9px;
          font-weight: 500;
          color: #fff;
          padding: 2px 6px;
          border-radius: 3px;
          background: #000;
          z-index: 1;

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            height: 10px;
            width: 10px;
            z-index: -1;
            background: #000;
            transform: translateX(-50%) rotate(45deg);
          }
        }
      }
    }
  }
}
</style>
